import 'package:animation/components/input/normal_input.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:animation/components/list_title/my_list_title.dart';
import 'package:animation/components/list_title/my_list_title_model.dart';
import 'package:animation/generated/l10n.dart';
import 'package:animation/pages/theme/localizations_page.dart';
import 'package:animation/pages/theme/theme_page.dart';
import 'package:animation/themes/theme_provider.dart';
import 'package:shared_preferences/shared_preferences.dart';

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool isShow = false;
  ScrollController scrollController = ScrollController();
  TextEditingController controller = TextEditingController();
  String nickName = '';

  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      if (scrollController.offset > 50) {
        setState(() {
          isShow = true;
        });
      } else {
        setState(() {
          isShow = false;
        });
      }
    });
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List<MyListTitleModel> list = [
      MyListTitleModel(
        title: S.of(context).theme,
        leading: Icon(Icons.color_lens),
        route: ThemePage(),
      ),
      MyListTitleModel(
          title: S.of(context).internationalization,
          leading: Icon(Icons.language),
          route: LocalizationsPage()),
      MyListTitleModel(
        title: S.of(context).about,
        leading: Icon(Icons.info),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        surfaceTintColor: Theme.of(context).colorScheme.primaryContainer,
        title: isShow
            ? Row(
                children: [
                  Image.asset('lib/assets/images/icon.png',
                      width: 30, height: 30),
                  const SizedBox(width: 10),
                  Text(
                    'Zsnoin能',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              )
            : null,
        actions: [
          IconButton(
            onPressed: () {
              Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
            },
            icon: Icon(
              Icons.brightness_4,
              color: Theme.of(context).colorScheme.inversePrimary,
            ),
          ),
        ],
      ),
      body: CustomScrollView(
        controller: scrollController,
        slivers: <Widget>[
          SliverToBoxAdapter(child: _buildTitle()),
          SliverToBoxAdapter(child: SizedBox(height: 10)),
          SliverToBoxAdapter(
              child: Container(
            margin: EdgeInsets.all(5),
            decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.primaryContainer,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Theme.of(context).colorScheme.shadow,
                    offset: Offset(0.2, 0.2),
                    blurRadius: 1,
                  ),
                ]),
            child: MyListTitle(list: list),
          )),
          SliverToBoxAdapter(child: SizedBox(height: 60)),
        ],
      ),
    );
  }

  Widget _buildTitle() {
    return Container(
      margin: EdgeInsets.only(top: 8, left: 8, right: 8),
      decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.primaryContainer,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Theme.of(context).colorScheme.shadow,
              offset: Offset(0.2, 0.2),
              blurRadius: 1,
            ),
          ]),
      child: Material(
        color: Theme.of(context).colorScheme.primaryContainer,
        borderRadius: BorderRadius.all(Radius.circular(10)),
        clipBehavior: Clip.hardEdge,
        child: InkWell(
          onTap: () {
            setState(() {
              controller.text = nickName;
            });
            // 打开弹窗，修改title
            showCupertinoDialog(
              //点击空白处取消
              barrierDismissible: true,
              context: context,
              builder: (context) {
                return CupertinoAlertDialog(
                  title: Text(S.of(context).s12),
                  content: Material(
                    color: Colors.transparent,
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: NormalInput(
                          controller: controller, radius: 20, height: 35),
                    ),
                  ),
                  actions: [
                    CupertinoDialogAction(
                      child: Text(S.of(context).s10),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                    CupertinoDialogAction(
                      child: Text(S.of(context).s11),
                      onPressed: () async {
                        final prefs = await SharedPreferences.getInstance();
                        setState(() {
                          nickName = controller.text;
                          prefs.setString('nickName', nickName);
                        });
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                );
              },
            );
          },
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              spacing: 10,
              children: [
                Image(
                  width: 60,
                  height: 60,
                  image: const AssetImage('lib/assets/images/icon.png'),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: MediaQuery.of(context).size.width - 150,
                      child: Text(
                        nickName,
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    const SizedBox(height: 2),
                    Container(
                      width: MediaQuery.of(context).size.width - 130,
                      padding: EdgeInsets.only(bottom: 2),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('Lv.6'),
                          Icon(
                            Icons.whatshot_outlined,
                            size: 18,
                            color: Theme.of(context).colorScheme.primary,
                          ),
                        ],
                      ),
                    ),
                    Container(
                      // 屏幕宽度
                      width: MediaQuery.of(context).size.width - 130,
                      height: 5,
                      decoration: BoxDecoration(
                        color: Theme.of(context).colorScheme.primary,
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
